<template>
  <div class="search">
    <div class="search-input">
      <van-search
        ref="foucs"
        v-model="value"
        show-action
        autofocus
        shape="round"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div @click="$router.go(-1)">取消</div>
        </template>
      </van-search>
    </div>
    <div class="search-body">
      <van-pull-refresh v-model="yprefreshing" success-text="刷新成功" @refresh="onypRefresh">
        <van-list
          v-model="yploading"
          :finished="ypfinished"
          finished-text="没有更多了"
          @load="onypLoad"
          offset="20"
        >
          <van-empty
            v-show="ypempty"
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="目前还没有约拍的消息哦"
          />
          <van-skeleton v-show="ypskeleton" style="background-color: #ffffff" title avatar :row="5" v-for="(item,index) of 5" :key="index"/>
          <div class="ypbox-box">
            <div v-for="(item,index) of yplist" :key="index" class="box-msg" @click="gotoypisd(item)">
              <div class="msg-uinfo">
                <div class="ui-le">
                  <img :src="item.user.uportrait" alt="">
                  <div class="le-msg">
                    <span>{{ item.user.username }}</span>
                    <span>{{ item.newaddTime }}</span>
                  </div>
                </div>
                <div class="ui-rg">
                  <div class="rg-box">
                    <i class="iconfont icon-dizhi"></i>
                    <span>{{ item.apAdress.split(' ')[0] }}</span>
                  </div>
                </div>
              </div>
              <div class="msg-text">
                <span>{{ item.aprequirement }}</span>
                <span>期望拍摄时间: {{ item.newypTime }}</span>
                <span>约{{ item.apType }}</span>
                <div class="msg-theme">
                  <span>主题: </span>
                  <span v-for="(theme,index) of item.aptheme" :key="index">{{ theme }}</span>
                </div>
              </div>
              <div class="msg-img">
                <div class="img_box" v-for='(imgs,index) in item.imgs' :key='index' v-show="index<2">
                  <img :src="imgs" alt="" @click.stop="getImg(item.imgs,index)">
                  <div class="img-flow" v-if="item.imgs.length>2">
                    <span>+{{ item.imgs.length-1 }}</span>
                  </div>
                </div>
              </div>
              <div class="msg-cz">
                <div class="cz-le">
                  <div class="le-gzbox">
                    <span>+ 关注</span>
                  </div>
                </div>
                <div class="cz-rg">
                  <div class="cz-box">
                    <i class="iconfont icon-dianzan2"></i>
                    <span>{{ item.thumbs.length }}</span>
                  </div>
                  <div class="cz-box">
                    <i class="iconfont icon-pinglun3"></i>
                    <span>{{ item.comments.length }}</span>
                  </div>
                  <div class="cz-box">
                    <i class="iconfont icon-fenxiang"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { ImagePreview, Toast } from 'vant';

export default {
  name: "search",
  data(){
    return{
      value: '',
      yplist: [],
      yppage: 1,
      maxyppage: null,
      yploading: false,
      ypfinished: false,
      yprefreshing: false,
      ypempty: true,
      ypskeleton: false,
    }
  },
  methods:{
    onypRefresh(){
      this.ypempty = false
      this.ypskeleton = true
      this.yplist = []
      setTimeout(() => {
        this.onSearch()
        this.yprefreshing = false;
        this.ypfinished = false;
        this.ypskeleton = false
      }, 1000);
    },
    onypLoad(){
      console.info("约拍加载")
      this.yploading = true;
      if (this.yppage > this.maxyppage || this.yppage == 1) {
        this.yploading = false;
        this.ypfinished = true;
      }else {
        setTimeout(()=>{
          this.onSearch()
          this.yploading = false;
        },1000)
      }
    },
    async onSearch() {
      this.yplist = []
      this.yppage = 1
      try {
        const res = await this.$axios({
          url: '/blog/appointlike',
          method: "post",
          data: {
            page: this.yppage,
            search: this.value,
          }
        })
        const {
          success,
          msg,
          data,
          maxpage,
          length
        } = res.data
        if (success) {
          console.info(data)
          if(data.rows.length == 0 && this.yppage == 1){
            this.ypempty = true
          }else {
            this.ypempty = false
          }
          data.rows.map(r => {
            const year = new Date(r.addTime).getFullYear();
            const mouth = `${new Date(r.addTime).getMonth()+1}`.padStart(2, 0);
            const day = `${new Date(r.addTime).getDate()}`.padStart(2, 0);
            const ypyear = new Date(r.apTime).getFullYear();
            const ypmouth = `${new Date(r.apTime).getMonth()+1}`.padStart(2, 0);
            const ypday = `${new Date(r.apTime).getDate()}`.padStart(2, 0);
            r.newaddTime = `${year}-${mouth}-${day}`
            r.newypTime = `${ypyear}-${ypmouth}-${ypday}`
            r.imgs = []
            r.aptheme = r.aptheme.split(',')
            r.pictures.map(url => {
              r.imgs.push(url.photourl)
            })
          })
          data.rows.forEach(r=>{
            this.yplist.push(r)
          })
          this.yppage++;
          this.maxyppage = maxpage
        } else {
          Toast.fail(msg)
        }
      } catch (e) {
        Toast.fail(e)
      }
    },
    async gotoypisd(item) {
      try {
        const res = await this.$axios({
          url: '/blog/appointupdate',
          method: "post",
          data: {
            appointmentid: item.appointmentid,
            browse: parseInt(item.browse) + 1,
          }
        })
        const {
          success,
          msg,
          data
        } = res.data
        if (success) {
          item.browse = parseInt(item.browse) + 1
          const params = {
            appointment: item,
            active: this.active,
          }
          if(this.uinfo){
            params.uinfo = this.uinfo
          }
          this.$router.push({
            name: "ypisd",
            params,
          })
        } else {
          Toast.fail(msg)
        }
      } catch (e) {
        Toast.fail(e)
      }
    },
    getImg(images, index) {
      ImagePreview({
        images: images,
        showIndex: true,
        loop: false, //是否循环播放
        startPosition: index
      })
    },
  }
}
</script>

<style scoped lang="scss">
.search{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .search-body{
    flex: 1;
    overflow: auto;
    background-color: #f6f6f6;

    .ypbox-box {
      overflow-y: auto;
      background-color: #ffffff;
      .box-msg {
        width: vw(690);
        margin: vw(10) auto;
        margin-bottom: 0;
        border-bottom: vw(10) solid #f6f6f6;
        .msg-uinfo {
          width: 100%;
          height: vw(100);
          display: flex;

          .ui-le {
            width: vw(510);
            display: flex;
            align-items: center;

            img {
              width: vw(85);
              height: vw(85);
              border-radius: 50%;
              object-fit: cover;
            }

            .le-msg {
              padding-left: vw(30);
              display: flex;
              flex-direction: column;
              line-height: vw(40);

              span {
                font-size: vw(28);

                &:last-child {
                  color: #d5d5d5;
                  font-size: vw(24);
                }
              }

            }
          }

          .ui-rg {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            .rg-box {
              justify-content: center;
              display: flex;
              align-items: center;
              color: lightpink;
              span {
                padding-left: vw(10);
                font-size: vw(25);
              }
            }
          }
        }

        .msg-text {
          display: flex;
          flex-direction: column;
          font-size: vw(28);
          color: #666666;

          &>span {
            &:first-child {
              font-size: vw(40);
              color: #000000;
            }
          }

          .msg-theme {
            span {
              font-size: vw(28) !important;
              color: #666666 !important;
              padding-right: vw(10);
            }
          }
        }

        .msg-img {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          padding-top: vw(10);

          .img_box {
            position: relative;

            img {
              width: vw(335);
              height: vw(500);
              object-fit: cover;
              &:first-child{
                margin-right: vw(10);
              }
            }

            .img-flow {
              position: absolute;
              width: vw(50);
              height: vw(50);
              bottom: vw(10);
              right: 0;
              background-color: #00000070;
              display: flex;
              align-items: center;
              justify-content: center;

              span {
                font-size: vw(30);
                color: #b3aaaa;
              }
            }
          }
        }

        .msg-cz {
          display: flex;

          .cz-le {
            display: flex;
            align-items: center;

            .le-gzbox {
              width: vw(120);
              height: vw(40);
              border: 1px solid lightsalmon;
              border-radius: vw(20);
              justify-content: center;
              display: flex;
              align-items: center;

              span {
                font-size: vw(20);
                color: lightsalmon;
              }
            }
          }

          .cz-rg {
            flex: 1;
            display: flex;
            justify-content: flex-end;

            .cz-box {
              padding: vw(15);
              display: flex;
              align-items: center;

              i {
                font-size: vw(40);
              }

              span {
                margin-left: vw(10);
                font-size: vw(30);
              }
            }
          }
        }
      }
    }
  }
}
</style>
